<template>
  <div>
    <Message severity="info">接口地址支持通配符(*)，其中 * 表示 1 级，** 表示 n 级。</Message>
    <form class="">
      <div class="mb-1">
        <div class="p-inputgroup flex-1">
          <span class="p-inputgroup-addon">选择请求方式</span>
          <Dropdown :options="menuActionStore.methodList" placeholder="请选择请求方式" v-model="method" class="w-full md:w-14rem"
            :class="{ 'p-invalid': methodError }" />
        </div>
        <small class="p-error">{{ methodError || '&nbsp;' }}</small>
      </div>
      <div class="mb-1">
        <div class="p-inputgroup flex-1">
          <span class="p-inputgroup-addon">输入接口地址</span>
          <InputText placeholder="请输入接口地址" v-model="api" :class="{ 'p-invalid': apiError }" />
        </div>
        <small class="p-error">{{ apiError || '&nbsp;' }}</small>
      </div>
      <Button label="提交" type="submit" icon="pi pi-check" @click="onSubmit" autofocus />
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Dropdown, Button, InputText, Message } from '@/utils/primevue'
import { useField, useForm } from 'vee-validate';
import { useToast } from 'vue-toastification'
import * as Yup from 'yup';
import { useMenuActionStore } from '@/stores/menuAction'
import type { TCreateMenuActionReq } from '@/typing/menuAction';


const menuActionStore = useMenuActionStore()
const toast = useToast()
const props = defineProps<{
  menuId: string
}>()

// 定义验证规则
const validationSchema = Yup.object({
  method: Yup.string().required('请输入用户名').trim(),
  api: Yup.string().required('请输入昵称').trim(),
});
const { handleSubmit, resetForm } = useForm({ validationSchema });
const { errorMessage: methodError, value: method } = useField<string>('method');
const { errorMessage: apiError, value: api } = useField<string>('api');

const onSubmit = handleSubmit((values) => {
  const menuId = props.menuId + ''
  menuActionStore.addMenuAction({ menuId, ...values } as TCreateMenuActionReq, () => {
    toast.success('新增数据成功～')
    menuActionStore.queryMenuActionList(props.menuId, { force: true })
  })
});
</script>

<style lang="less" scoped>
</style>
